<template>
	<view class="main">
		<view class="u-page">
			<z-paging ref="paging" v-model="indexList" @query="loadmore" :auto="false">
				<view slot="top">
					<view class="top">
						<view class="address_input">
							<view class="address">
								<image src="../static/test/shaixuan-2.png" mode=""></image>
								<span>{{area?area:'北京'}}</span>
							</view>
							<view class="input">
								<text class="wlIcon-sousuo1 text-bold"></text>
								<input type="text" placeholder="请输入服务者名称" v-model="workerName">
								<button @click="refreshList">搜索</button>
							</view>
						</view>

						<view class="flex-box">
							<view class="flex-item" @tap="handleModal(1)">
								<span>地区</span>
								<view class="icon">
									<u-icon label="" name="arrow-up-fill" id="action"></u-icon>
									<u-icon label="" name="arrow-down-fill"></u-icon>
								</view>
							</view>
							<view class="flex-item" @tap="handleModal(2)">
								<span>工种</span>
								<view class="icon">
									<u-icon label="" name="arrow-up-fill" id="action"></u-icon>
									<u-icon label="" name="arrow-down-fill"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="list-item" v-for="(item, index) in indexList" :key="index"
					@click="$wanlshop.to(`/pages/apps/worker/workerDetail?id=${item.id}&distance=${item.distance}`)">
					<u-image :showLoading="true" :src="item.avatar?item.avatar:'../static/test/111.png'"></u-image>
					<view class="worderInfo">
						<view class="row-one">
							<b>{{item.name}}</b> <span>距离：{{item.distance}}km</span>
						</view>
						<view class="row-tow">
							<b v-if="item.is_vip">VIP</b> <span>{{item.type_name}}</span>
						</view>
						<view class="row-three">
							<view class="row-three-left">{{item.user_ping_count}}评价 <u-rate
									v-model="item.user_hao_ping_count/20" count="5" readonly size="12" /></view>
							<view class="row-three-right">{{item.year}}年
							</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
		<!-- 弹窗 -->
		<view class="WANL-MODAL" @touchmove.stop.prevent="moveHandle">
			<!-- 顶部 -->
			<view class="cu-modal top-modal" :class="{ show: isModal2 }">
				<view class="cu-dialog" :style="{ paddingTop: headHeight  + 'px' }" @tap.stop="">
					<view class="workType">
						<view class="workType_item" v-for="item,ind in workList" :key="ind"
							:style="{'background-color': backColor == ind ?'#fe6600':'#f7f8fc'}"
							@click="backColorHandle(item,ind)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>

			<view class="cu-modal top-modal" :class="{ show: isModal1 }">
				<view class="cu-dialog" :style="{ paddingTop: headHeight  + 'px' }" @tap.stop="">
					<view class="nav">
						<view class="nav_left">
							<ul>
								<li v-for="item,ind in cityList"
									:style="{color:EconomizeIndex == ind?'#ff961e':'#000','background-color':EconomizeIndex == ind?'#ffffff':'#f5f5f5'}"
									:key="ind" @click="switchEconomize(item,ind)">
									<view class="line"
										:style="{'background-color':EconomizeIndex == ind?'#ff961e':'#f5f5f5'}">
									</view><span>{{item.name}}</span>
								</li>
							</ul>
						</view>
						<view class="nav_center">

							<ul v-if="cityList &&cityList[EconomizeIndex]">
								<li v-for="item,ind in cityList[EconomizeIndex].city"
									:style="{color:marketIndex == ind?'#ff961e':'#000'}"
									@click='switchMarket(item,ind)'>
									{{item.name}}
								</li>
							</ul>
						</view>
						<view class="nav_right">
							<ul v-if="cityList[EconomizeIndex] && cityList[EconomizeIndex].city[marketIndex]">
								<li v-for="item,ind in cityList[EconomizeIndex].city[marketIndex].area"
									:style="{color:distingIndex == ind?'#ff961e':'#000'}"
									@click='switchDisting(item,ind)'>
									{{item.name}}
								</li>
							</ul>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				show: false,
				indexList: [],
				isModal1: false,
				isModal2: false,
				headHeight: 0,
				backColor: 0,
				workerType: '',
				workList: [],
				cityList: [],
				EconomizeIndex: 0,
				marketIndex: 0,
				distingIndex: 0,
				area_id: 0,
				area: '',
				workerName: '',
			}
		},
		onReady() {
			// #ifdef H5
			this.headHeight = 44
			// #endif
			// #ifndef H5
			this.headHeight = 0
			// #endif
		},
		onLoad() {
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: (mres) => {
					console.log(mres)
					that.lng = mres.longitude;
					that.lat = mres.latitude;
					that.loadmore(1, 10)
				},
				error: (err) => {
					console.log(err);
				}
			});
		},

		mounted() {},

		methods: {
			//重新获取数据
			refreshList() {
				this.$refs.paging.scrollToTop()
				this.$refs.paging.refresh();
			},
			// 切换省
			switchEconomize(item, ind) {
				this.area = item.name
				this.EconomizeIndex = ind
				this.marketIndex = 0
				this.distingIndex = 0
			},
			// 切换市
			switchMarket(item, ind) {
				this.area = item.name
				this.marketIndex = ind
				this.distingIndex = 0
			},
			// 切换区
			switchDisting(item, ind) {
				this.area = item.name
				this.distingIndex = ind
				this.area_id = item.id
				this.isModal1 = false
				this.refreshList()
			},
			// 工种选择
			backColorHandle(item, index) {
				this.backColor = index
				// 工种类型，传给后端
				this.workerType = item.id
				this.isModal2 = false
				this.refreshList()
			},
			// 弹出层
			handleModal(type) {
				if (type == 1 && this.isModal2 == false) {
					this.isModal1 = !this.isModal1;
					if (this.isModal1) {
						this.getAreaData()
					}
				} else if (type == 2 && this.isModal1 == false) {
					this.isModal2 = !this.isModal2;
					if (this.isModal2) {
						this.getWorkerData()
					}
				}
			},
			// 请求地区数据
			async getAreaData() {
				await uni.request({
					url: '/wanlshop/common/area',
					method: 'POST',
					success: (res) => {
						if (res.res.code == 1) {
							this.cityList = res.res.data
						} else {
							this.$wanlshop.msg(res.msg || '请求失败！');
						}
					}
				});
			},
			// 请求工种数据
			async getWorkerData() {
				await uni.request({
					url: '/worker/get_type_list',
					method: 'GET',
					success: (res) => {
						if (res.res.code == 1) {
							this.workList = res.res.data
						} else {
							this.$wanlshop.msg(res.msg || '请求失败！');
						}
					}
				});
			},
			//获取数据列表
			async loadmore(pageNo, pageSize) {
				let that = this
				let data = {
					page: pageNo,
					limit: pageSize,
					lat: this.lat,
					lng: this.lng,
					area_id: this.area_id,
					name: this.workerName,
					type_id: this.workerType
				};
				await uni.request({
					url: '/worker/get_list',
					method: 'POST',
					data: data,
					success: (res) => {
						if (res.res.code == 1) {
							that.$refs.paging.complete(res.res.data);
						} else {
							that.$wanlshop.msg(res.msg || '请求失败！');
						}
					}
				});

			},
			//禁止父元素滑动 1.0.3升级
			moveHandle() {}
		}
	}
</script>

<style scoped lang="less">
	/deep/.uni-input-placeholder {
		font-size: 26rpx;
		color: #999999;
	}

	/deep/.uni-input-input {
		font-size: 26rpx;
	}

	ul li {
		list-style-type: none;
	}

	.main {
		height: calc(100vh - 192rpx);
		overflow: hidden;

		.WANL-MODAL {
			.cu-modal {
				&.top-modal {
					background: rgba(0, 0, 0, 0.6);
					text-align: inherit;

					.cu-dialog {

						background: #fff;
						border-radius: 0 0 18rpx 18rpx;

						.nav {
							ul {
								text-align: center;
								padding-left: 0;
								overflow-y: scroll;
								height: 300rpx;
							}

							li {
								height: 100rpx;
								line-height: 100rpx;
							}

							display: flex;

							.nav_left {
								width: 33%;

								ul {

									background-color: #f6f6f6;

									li {
										display: flex;
										align-items: center;

										.line {
											// padding-top: 30rpx;
											width: 4rpx;
											height: 40rpx;
											background-color: #FF961F;
										}

										span {
											flex: 1;
										}
									}

								}
							}

							.nav_center {
								width: 33%;

								ul {
									background-color: #fafafa;
								}
							}

							.nav_right {
								width: 33%;
							}
						}

						.workType {
							display: flex;
							gap: 20rpx;
							flex-wrap: wrap;
							padding: 30rpx 54rpx 56rpx;

							.workType_item {
								border-radius: 8rpx;
								width: 200rpx;
								height: 56rpx;
								background-color: #F7F8FC;
								line-height: 56rpx;
								text-align: center;
							}

						}
					}
				}
			}
		}
	}

	.top {
		background-color: #fff;
		padding-top: 16rpx;
		padding-bottom: 30rpx;
		position: relative;
		height: 100px;
		z-index: 3000;

		.address_input {
			padding: 16rpx 42rpx 0 34rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.address {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.input {
				width: 516rpx;
				height: 54rpx;
				background-color: #eee;
				display: flex;
				align-items: center;
				padding: 0 0 0 30rpx;
				border-radius: 27rpx;

				.wlIcon-sousuo1 {
					color: #D1D2D5;
					margin-right: 24rpx;
				}

				button {
					width: 100rpx;
					font-size: 20rpx;
					line-height: 40rpx;
					color: #fff;
					height: 40rpx;
					background-color: #fe6600;
					border-radius: 20rpx;
				}
			}
		}

		.flex-box {
			display: flex;
			justify-content: space-between;
			width: 450rpx;
			margin-left: 150rpx;

			.flex-item {
				width: 100%;
				margin-top: 36rpx;
				width: 80rpx;
				font-size: 26rpx;
				display: flex;

				span {
					display: inline-block;
					/* height: 60rpx; */
					/* background-color: red; */
					line-height: 34rpx;
				}

				/deep/.u-icon__icon {
					margin-left: 10rpx;
					line-height: 30rpx !important;
				}

				/deep/.u-icon__icon:last-child {
					/* background-color: red; */
					margin-top: -4rpx
				}

				/deep/.u-icon__icon span {
					height: 16rpx;
					color: #999;
					font-size: 16rpx;
				}
			}
		}
	}




	.u-page {
		/* margin-top: 186pt; */
		// height: calc(100vh - 800rpx);
		position: relative;
	}

	.list-item {
		margin-top: 20rpx;
		margin-left: 34rpx;
		width: 682rpx;
		height: 192rpx;
		background-color: #fff;
		position: relative;
	}


	/deep/.u-image .u-image__image {
		margin: 24rpx !important;
		width: 144rpx !important;
		height: 144rpx !important;
	}

	/deep/.u-image {
		width: auto !important;
		height: auto !important;
	}

	.worderInfo {
		position: absolute;
		top: 0;
		right: 0;
		width: 480rpx;
		height: 100%;
		/* background-color: red; */
	}

	.row-one {
		margin-top: 24rpx;
	}

	.row-one b {
		font-size: 28rpx;
	}

	.row-one span {
		display: inline-block;
		float: right;
		margin-right: 32rpx;
		color: #999;
		font-size: 24rpx;
	}

	.row-tow {
		margin-top: 6rpx;
	}

	.row-tow b {
		display: inline-block;
		background-color: #fe6600;
		color: #fff;
		width: 50rpx;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		font-size: 20rpx;
		// border: 2rpx dashed #999;
		font-weight: 400;
	}

	.row-tow span {
		display: inline-block;
		padding: 2rpx 10rpx;
		background-color: #fff0e5;
		// border: 2rpx dashed #999;
		color: #fe7010;
		margin-left: 6rpx;
		font-size: 20rpx;
	}

	.row-three {
		display: flex;
		justify-content: space-between;
		align-items: center;

		// margin-right: 40rpx;
		// font-size: 24rpx;
		// color: #999;
		// font-weight: 400;
		// line-height: 56rpx;
		.row-three-left {
			display: flex;
			align-items: center;

		}

		.row-three-right {
			display: inline-block !important;
			width: 152rpx !important;
			height: 56rpx !important;
			text-align: center;
			background-color: #fe6600;
			border-radius: 56rpx;
			color: #fff;
			font-size: 26rpx;
			font-weight: 700;
			margin-right: 24rpx;
			line-height: 56rpx;
		}
	}



	/deep/.u-image__error {
		margin: 24rpx 0 0 20rpx !important;
		width: 144rpx !important;
		height: 144rpx !important;
	}
</style>